<template>
  <div>
    <vHeader>歌单详情</vHeader>
    <div>
      <div class="imgwrapper">
        <img src="../../assets/timg.jpg" width="100%" @load="imageLoaded" 
        ref="bgImg"/>
      </div>
      <div class="listsWrapper" ref="listsWrapper" :style="{height:`${wrapperHeight}px`}" v-if="songLists.length">
        <div
          class="songsLists"
          @touchstart="touchstart"
          :style="{marginTop:`${listsHeight}px`}"
          @touchmove="touchmove"
          @touchend="touchend"
          ref="songLists"
        >
          <ul class="listsWrapper">
            <li v-for="(item, index) in songLists" :key="index" @click="openSongsByid(item.id)">
              <p>
                <span class="name">{{index+1}} . {{item.name}}</span>
                <span>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xinjiqimao" />
                  </svg>
                </span>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vHeader from "../../components/Header/Header";
import { getSongsDetails } from "../../api/recommend";

export default {
  components: {
    vHeader
  },
  data() {
    return {
      listsHeight: 200,
      lastPosY: 0,
      curPosY: 0,
      diff: 0,
      BannerHeight: 0,
      wrapperHeight: 0,
      songLists:[]
    };
  },
  created() {
    getSongsDetails(this.$store.getters.getUsersSongLists).then(res => {
      this.songLists = res.data.songs;
    });
  },
  methods: {
    imageLoaded(e) {
      if (this.BannerHeight > 0) {
        return;
      }
      this.BannerHeight = e.target.clientHeight;
    },
    touchstart(e) {
      this.lastPosY = e.targetTouches[0].clientY;
    },
    touchmove(e) {
      this.curPosY = e.targetTouches[0].clientY;
      // 计算差值
      this.diff = +(this.curPosY - this.lastPosY);
      let scale = this.diff / this.BannerHeight;
      if (
        this.diff > 0 &&
        this.$refs.listsWrapper &&
        this.$refs.listsWrapper.scrollTop == 0
      ) {
        e.preventDefault();
        if (this.diff <= 100) {
          this.$refs.bgImg.style.transform = `scale(${1 + scale})`;
          this.$refs.songLists.style.transform = `translateY(${this.diff}px)`;
        } else {
        }
      } else {
        return;
      }
    },
    touchend() {
      this.$refs.bgImg.style.transform = `scale(1)`;
      this.$refs.songLists.style.transform = `translateY(0px)`;
    },
    openSongsByid(id) {
      this.$store.dispatch("checkedSongs", id);
    }
  },
  computed: {
    songsLists() {
      return this.$store.getters.getTopLists;
    },
    songsObj() {
      return this.$store.getters.getTopObj;
    }
  },
  mounted() {
    this.wrapperHeight = document.documentElement.clientHeight;
  }
};
</script>

<style scoped lang="stylus">
.icon {
  width: 45px;
  height: 45px;
}
svg 
    margin-right 5px
    margin-top 2px
.imgwrapper
    position fixed
    z-index -1
    top 0
    left 0
.listsWrapper
    height 100%
    overflow scroll
.songsLists
    padding-top 40px
    border-radius 40px 40px 0px 0px 
    background rgba(27,163,223,1)
.listsWrapper
    height 100%
    .listsWrapper
            li
                height 50px
                width 100%
                margin 5px 0px
                background rgba(233,233,216,0.2)
                border-bottom 1px dashed #fff
                p
                    background rgba(233,233,216,0.4)
                    display flex
                    justify-content space-between
                    margin 0 auto
                    width 90%
                    white-space nowrap
                    overflow hidden
                    text-overflow ellipsis
                    color rgb(90,46,1)
                    font-size 18px
                    font-weight 700
                    padding-left 20px
                    vertical-align:middle
                    .name 
                        display inline-block
                        height 30px
                        white-space nowrap
                        overflow hidden
                        text-overflow ellipsis
                        position relative
                        top 15px
</style>